<template>
    <div>
        <GoBack :isnoShow="true">
            <div class="flex flex-col items-center justify-center">
                <div class="text-darkBlue dark:text-garyWhite text-22px font-black enter-y">
                    交易明细
                </div>
            </div>
        </GoBack>
        <div>
            <van-tabs @change="changeTab" :active="active"  title-active-color="rgb(4, 174, 211)">
            <van-tab name="0" title="用车">
                <div class="list-content">
                    <Card2 v-for="item in dataList" :key="item.id" :data="item" :userType="0"/>
                </div>
            </van-tab>
            <van-tab name="1" title="载客">
                <div>
                    <Card2 v-for="item in dataList1" :key="item.id" :data="item" :userType="1"/>
                </div>
            </van-tab>
        </van-tabs>
        </div>
    </div>
</template>

<script lang="ts" setup>
import GoBack from '@/components/GoBack.vue'
import {onMounted,ref} from 'vue'
import {queryDd} from '@/api/server.js'
import Card2 from '@/components/Card2.vue'
let dataList = ref([])
let dataList1 = ref([])
const active = ref('0')
onMounted(() => {
    active.value = localStorage.getItem('activejyTab') || '0'
    let userInfo:any = JSON.parse(localStorage.getItem('userInfo') || '')
    queryDd({userIds:[userInfo.id],user_type:'0'}).then(res => {
        console.log(res.data,'res')
        dataList.value = res.data || []
    })
    queryDd({userIds:[userInfo.id],user_type:'1'}).then(res => {
        console.log(res.data,'res')
        dataList1.value = res.data || []
    })
})

const changeTab = (name) => {
    console.log(name)
    active.value = name
    localStorage.setItem('activejyTab',name || 0)
}
</script>

<style scoped lang="less">
.list-content {
    height: calc(100vh - 200px);
    overflow: scroll;

}
:deep(.van-tab__text) {
        font-size: 18px;
    }
    
</style>